import { Meta } from '@storybook/react'
import { Input } from './input'
export default {
  title: 'Components/Input',
  id: 'Input',
  component: Input,
  // 装饰器（控制宽度）
  decorators: [
    (Story) => (
      <div style={{ width: '350px' }}>
        <Story />
      </div>
    )
  ],
  tags: ['autodocs'] // 自动生成文档
} as Meta<typeof Input>

export const DfInput = {
  args: {
    placeholder: 'default size',
    icon: 'search'
  }
}

export const DSizeInput = () => (
  <>
    <Input defaultValue="large size" size="lg" />
    <Input placeholder="small size" size="sm" />
  </>
)
DSizeInput.storyName = '大小不同的 Input'
export const EPandInput = () => (
  <>
    <Input defaultValue="prepend text" prepend="https://" />
    <Input defaultValue="google" append=".com" />
  </>
)
EPandInput.storyName = '带前后缀的 Input'
